<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>添加扩展</title>
    </title>
    <!-- 引入 WeUI -->
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui.min.css"/>
    <link rel="stylesheet" href="https://cdn.bootcss.com/jquery-weui/1.2.0/css/jquery-weui.css"/>
    <style>
        body, html {
            height: 100%;
            background-color: #f4f4f4;
            -webkit-tap-highlight-color: transparent;
        }

        .basic-color {
            background-color: #1E88E5;
            color: #FFFFFF;
        }

        .basic-weui-btn {
            background-color: #1E88E5;
            color: #FFFFFF;
        }

        .basic-weui-btn:hover {
            background-color: #1E88E5;
            color: #FFFFFF;
        }

        .basic-weui-btn:active {
            background-color: #1E88E5 !important;
            color: #FFFFFF;
        }

        footer {
            text-align: center;
            font-size: 14px;
            padding: 20px;
        }

        .weui-loadmore_line .weui-loadmore__tips {
            background-color: #f4f4f4;
        }

        footer a {
            color: #999;
            text-decoration: none;
        }

    </style>
</head>

<body ontouchstart="">
<div class="weui-cells__title weui-cell">
    基本信息
</div>
<div class="weui-cells ">
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">扩展名称</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input plugin_name" type="text" placeholder="请输入扩展名称">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">url_page</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input plugin_url_page" type="text" pattern="[a-z0-9]*" placeholder="落地页">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__hd">
            <label class="weui-label">api_url</label>
        </div>
        <div class="weui-cell__bd">
            <input class="weui-input plugin_api_url" type="text" pattern="[a-z\/0-9]*"
                   placeholder="例如http(s)://127.0.0.1">
        </div>
    </div>
    <div class="weui-cell">
        <div class="weui-cell__bd">
            <div class="weui-uploader">
                <div class="weui-uploader__hd">
                    <p class="weui-uploader__title">logo上传</p>
                    <div class="weui-uploader__info">0/1</div>
                </div>
                <div class="weui-uploader__bd">
                    <ul class="weui-uploader__files" id="uploaderFiles">
                    </ul>
                    <div class="weui-uploader__input-box">
                        <input id="uploaderInput" class="weui-uploader__input uploaderInput" type="file"
                               accept="image/*" multiple="">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div>
    <div class="weui-cells__title weui-cell">
        基本设置
    </div>
    <div class="weui-cells">
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">扩展序号</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input order" type="text" pattern="[0-9]*" placeholder="输入序号">
            </div>
        </div>
        <div class="weui-cell">
            <div class="weui-cell__hd">
                <label class="weui-label">允许访问的IP</label>
            </div>
            <div class="weui-cell__bd">
                <input class="weui-input allow_ip" type="text" pattern="(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)\.(25[0-5]|2[0-4]\d|[0-1]\d{2}|[1-9]?\d)" placeholder="输入允许访问的IP地址, 用逗号隔开">
            </div>
        </div>
        <a class="weui-cell weui-cell_access position" href="javascript:;">
            <div class="weui-cell__bd">
                <p>扩展位置</p>
            </div>
            <div class="weui-cell__ft position-txt">
            </div>
        </a>
        <a class="weui-cell weui-cell_access per_status" href="javascript:;">
            <div class="weui-cell__bd">
                <p>扩展状态</p>
            </div>
            <div class="weui-cell__ft per_status-txt">

            </div>
        </a>
    </div>
    <div class="weui-btn-area">
        <a class="weui-btn basic-weui-btn weui-btn_primary basic-color addPluginButton" url-data="/plugin/addPlugin"
           href="javascript:" id="addPluginButton">确定</a>
    </div>
</div>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
<script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.1.3/weui.min.js"></script>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery-weui/1.2.0/js/jquery-weui.js"></script>
<script type="text/javascript">
    function getOsType() {
        var u = navigator.userAgent;
        if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
            return 'Android';
        } else if (u.indexOf('iPhone') > -1) {
            return 'IOS';
        } else {
            return 'PC';
        }
    }

    function reqUrl(reqUri, params, callbackName) {
        var type = getOsType();
        if (type == 'Android') {
            Android.requestPost(reqUri, params, callbackName);
        } else if (type == 'IOS') {
            ios_requestPost(reqUri, params, callbackName);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function reqHtml(reqUri, params) {
        var type = getOsType();
        if (type == 'Android') {
            Android.requestPage(reqUri, params)
        } else if (type == 'IOS') {
            ios_requestPage(reqUri, params);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function reqImageUpload(callback) {
        var type = getOsType();
        if (type == 'Android') {
            Android.imageUpload(callback);
        } else if (type == 'IOS') {
            ios_imageUpload(callback);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function reqImageDownload(imageid, callback) {
        var type = getOsType();
        if (type == 'Android') {
            Android.imageDownload(imageid, callback);
        } else if (type == 'IOS') {
            ios_imageDownload(imageid, callback);
        } else {
            $.toast('暂时不支持该设备');
        }
    }

    function toast(msg) {
        var type = getOsType();
        if (type == 'Android') {
            Android.showToast(msg);
        } else if (type == 'IOS') {
            $.toast(msg);
        } else {
            console.log(msg);
        }
    }

    function isDomain(siteAddress) {

        if (siteAddress.indexOf("://") > -1) {
            hostname = siteAddress.split('/')[2];
        } else {
            hostname = siteAddress.split('/')[0];
        }
        var domain = hostname.split(':')[0];
        domain = domain.split('?')[0];

        if (domain) {
            if (/^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/.test(domain)) {
                return true;
            }

            var re2 = /^(.+\.)(com|edu|gov|int|mil|net|org|biz|info|name|museum|coop|aero|xyz|top|store|team|cc|shop|club|vip|ink|site|fun|online|work|red|group|tv|[a-z][a-z])$/;
            if (re2.test(domain)) {
                return true;
            }
        }

        return false;
    }

    $(document).on("click", '.position', function () {
        $.actions({
            title: "",
            onClose: function () {
                console.log("close");
            },
            actions: [{
                text: "首页位置",
                className: "color-primary weui-dialog__btn ",
                onClick: function () {
                    $(".position-txt").html("首页位置");
                    $(".position").attr("data", "0");
                }
            },
                {
                    text: "消息帧扩展",
                    className: "color-warning weui-dialog__btn",
                    onClick: function () {
                        $(".position-txt").html("消息帧扩展");
                        $(".position").attr("data", "1");
                    }
                }
            ]
        });
    });

    $(document).on("click", '.per_status', function () {
        $.actions({
            title: "",
            onClose: function () {
                console.log("close");
            },
            actions: [{
                text: "仅管理员",
                className: "color-primary weui-dialog__btn ",
                onClick: function () {
                    $(".per_status-txt").html("仅管理员");
                    $(".per_status").attr("data", "0");
                }
            },
                {
                    text: "全员展示",
                    className: "color-warning weui-dialog__btn",
                    onClick: function () {
                        $(".per_status-txt").html("全员展示");
                        $(".per_status").attr("data", "1");
                    }
                }
            ]
        });
    });


    $(document).on("click", ".addPluginButton", function () {
        var reqUri = $(this).attr('url-data');
        var apiUrl = $('.plugin_api_url').val();
        var urlPage = $('.plugin_url_page').val();
        var name = $('.plugin_name').val();
        var pluginIcon = $('.plugin_icon').attr('plugin-icon');
        var perStatus = $(".per_status").attr("data");
        var position = $(".position").attr("data");
        var order = $(".order").val();
        var allowIp = $(".allow_ip").val();

        if (name.length < 1) {
            $.toptip('插件名称不能为空', 'error');
            return false;
        }

        if (!position || position.length < 1) {
            $.toptip('请选择扩展位置', 'error');
            return false;
        }

        if (!perStatus || perStatus.length < 1) {
            $.toptip('请选择插件状态', 'error');
            return false;
        }

        var params = {
            'api_url': apiUrl,
            'url_page': urlPage,
            'name': name,
            'plugin_icon': pluginIcon,
            'position': position,
            'per_status': perStatus,
            'order': order,
            'allow_ip': allowIp
        };
        reqUrl(reqUri, JSON.stringify(params), 'addPlugin');
        $('.addPluginButton').removeClass('weui-btn_primary');
        $('.addPluginButton').removeClass('basic-color');
        $('.addPluginButton').removeClass('basic-weui-btn');
        $('.addPluginButton').addClass('weui-btn_disabled');
        $('.addPluginButton').addClass('weui-btn_default');
        $('.addPluginButton').prop('disabled', true);
    });

    function addPlugin(result) {
        $('.addPluginButton').addClass('weui-btn_primary');
        $('.addPluginButton').addClass('basic-color');
        $('.addPluginButton').addClass('basic-weui-btn');
        $('.addPluginButton').removeClass('weui-btn_disabled');
        $('.addPluginButton').removeClass('weui-btn_default');
        $('.addPluginButton').prop('disabled', false);
        if (result == 'success') {
            $('input').val('');
            $('#uploaderFiles').html('');
            $.toast('添加成功');
        } else {
            $.toast('添加失败', 'forbidden');
        }
    }

    $(document).on("click", '.uploaderInput', function () {
        reqImageUpload("jsimageUpload");
    });

    function jsimageUpload(result, imageId, imageLocalPath) {
        var type = getOsType();
        if (result == 1) {
            if (type == 'Android') {
                var img = '<li class="weui-uploader__file plugin_icon" plugin-icon="' + imageId + '"><img src="http://akaxin/img' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
            } else {
                var img = '<li class="weui-uploader__file plugin_icon" plugin-icon="' + imageId + '"><img src="' + imageLocalPath + '" style="height:75px; width:75px;" /></li>';
            }
            $('#uploaderFiles').html(img);
            $('.weui-uploader__info').html('1/1');
        } else {
            $.toast('上传图片失败', 'forbidden');
        }
    }
</script>
</body>

</html>